pre-commitフックでJavaScriptのコード品質を向上させましょう。よりクリーンで保守性の高いプロジェクトのために、コード品質ゲートを設定・実装する方法を解説します。
JavaScriptのコード品質ゲート：pre-commitフック設定のマスターガイド
絶えず進化するソフトウェア開発の世界では、高いコード品質を維持することが最も重要です。クリーンで、整形され、バグのないコードは、メンテナンスコストを削減するだけでなく、コラボレーションを促進し、開発サイクルを加速させます。コード品質を強制するための強力なテクニックの1つが、pre-commitフックを使用したコード品質ゲートの実装です。この記事では、JavaScriptプロジェクトにpre-commitフックを設定するための包括的なガイドを提供し、コードがリポジトリに到達する前にコード品質チェックを自動化できるようにします。
pre-commitフックとは？
Gitフックは、commit、push、receiveなどのイベントの前後にGitが実行するスクリプトです。特にpre-commitフックは、コミットが確定する前に実行されます。これにより、コミットされる変更を検査し、所定の品質基準を満たさないコミットを防ぐ重要な機会が提供されます。これらは、低品質なコードがコードベースに侵入するのを防ぐゲートキーパー（門番）だと考えてください。
なぜJavaScriptのコード品質にpre-commitフックを使うのか？
- 早期のエラー検出： pre-commitフックは開発プロセスの早い段階でコード品質の問題をキャッチし、それらがさらに広がるのを防ぎます。これは、コードレビュー中や、さらに悪いことに本番環境で問題を発見するよりもはるかに効率的です。
- コードフォーマットの自動化： チームやプロジェクト全体で一貫したコードスタイルを保証します。自動フォーマットにより、スタイルに関する議論を防ぎ、より読みやすいコードベースに貢献します。
- コードレビュー負担の軽減： コーディング標準を自動的に強制することで、pre-commitフックはコードレビュー担当者の負担を軽減し、彼らがアーキテクチャの決定や複雑なロジックに集中できるようにします。
- コード保守性の向上： 一貫性があり高品質なコードベースは、時間の経過とともに行うメンテナンスや進化が容易になります。
- 一貫性の強制： 誰が書いたコードであっても、すべてのコードがプロジェクトの基準に準拠することを保証します。これは、ロンドン、東京、ブエノスアイレスなど、異なる場所から作業する分散チームにおいて、個々のコーディングスタイルが異なる可能性がある場合に特に重要です。
JavaScriptコード品質のための主要ツール
JavaScriptのコード品質チェックを自動化するために、pre-commitフックと組み合わせて一般的に使用されるツールがいくつかあります：
- ESLint： 潜在的なエラーを特定し、コーディングスタイルを強制し、コードの可読性を向上させるのに役立つ強力なJavaScriptリンターです。幅広いルールをサポートし、高度な設定が可能です。
- Prettier： 一貫したスタイルに準拠するようにコードを自動的にフォーマットする、意見の強いコードフォーマッターです。JavaScript、TypeScript、JSX、その他多くの言語をサポートしています。
- Husky： Gitフックの管理を容易にするツールです。Gitワークフローのさまざまな段階で実行されるスクリプトを定義できます。
- lint-staged： ステージングされたファイルに対してのみリンターやフォーマッターを実行するツールで、pre-commitプロセスを大幅に高速化します。これにより、変更されていないファイルに対する不要なチェックを防ぎます。
pre-commitフックの設定：ステップバイステップガイド
Huskyとlint-stagedを使用してJavaScriptプロジェクトにpre-commitフックを設定する方法の詳細なガイドです：
ステップ1：依存関係のインストール
まず、npmまたはyarnを使用して、必要なパッケージを開発依存関係としてインストールします：
npm install --save-dev husky lint-staged eslint prettier
または、yarnを使用する場合：
yarn add --dev husky lint-staged eslint prettier
ステップ2：Huskyの初期化
HuskyはGitフックの管理プロセスを簡素化します。次のコマンドを使用して初期化します：
npx husky install
これにより、プロジェクトに`.husky`ディレクトリが作成され、Gitフックが保存されます。
ステップ3：pre-commitフックの設定
Huskyを使用してpre-commitフックを追加します：
npx husky add .husky/pre-commit "npx lint-staged"
このコマンドは`.husky`ディレクトリに`pre-commit`ファイルを作成し、そこに`npx lint-staged`コマンドを追加します。これにより、Gitは各コミットの前にlint-stagedを実行するようになります。
ステップ4：lint-stagedの設定
lint-stagedを使用すると、ステージングされたファイルに対してのみリンターやフォーマッターを実行できるため、pre-commitプロセスが大幅に高速化されます。プロジェクトのルートに`lint-staged.config.js`（またはESモジュール用の`lint-staged.config.mjs`）ファイルを作成し、次のように設定します：
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
この設定は、ステージングされたすべてのJavaScriptおよびTypeScriptファイルに対してESLintとPrettierを実行するようにlint-stagedに指示します。ESLintの`--fix`フラグは自動修正可能なリンティングエラーを自動的に修正し、Prettierの`--write`フラグはファイルをフォーマットし、フォーマットされたコードで上書きします。
あるいは、`package.json`ファイルに直接設定を定義することもできます：
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
ステップ5：ESLintの設定
まだ設定していない場合は、プロジェクト用にESLintを設定します。次のコマンドを使用してESLint設定ファイルを作成できます：
npx eslint --init
これにより、プロジェクトの要件に基づいてESLint設定ファイル（`.eslintrc.js`、`.eslintrc.json`、または`.eslintrc.yml`）を作成するプロセスがガイドされます。さまざまな定義済み設定から選択するか、独自のカスタムルールを作成できます。
`.eslintrc.js`の例：
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'react',
'@typescript-eslint'
],
rules: {
'no-unused-vars': 'warn',
'react/prop-types': 'off'
}
};
この設定は、推奨されるESLintルール、推奨されるReactルール、推奨されるTypeScriptルールを拡張し、Prettierと統合します。また、`react/prop-types`ルールを無効にし、`no-unused-vars`ルールを警告に設定します。
ステップ6：Prettierの設定
プロジェクトのルートに`.prettierrc.js`（または`.prettierrc.json`、`.prettierrc.yml`、`.prettierrc.toml`）ファイルを作成してPrettierを設定します。プロジェクトのスタイルガイドラインに合わせてPrettierのフォーマットオプションをカスタマイズできます。
`.prettierrc.js`の例：
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2
};
この設定は、Prettierがシングルクォートを使用し、セミコロンなし、末尾のカンマあり、一行の最大文字数120、タブ幅2スペースを使用するように設定します。
あるいは、Prettierの設定を`package.json`内に定義することもできます：
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
ステップ7：設定のテスト
設定をテストするには、いくつかの変更をステージングしてコミットを試みます。例：
git add .
git commit -m "Test pre-commit hook"
リンティングやフォーマットに問題がある場合、ESLintとPrettierが自動的に修正（可能な場合）するか、エラーを報告します。エラーが報告された場合、コミットは中止され、再度コミットする前に問題を修正することができます。
高度な設定オプション
異なるリンターとフォーマッターの使用
他のリンターやフォーマッターをpre-commitフックの設定に簡単に統合できます。例えば、CSSやSASSファイルのリンティングにStylelintを使用できます：
npm install --save-dev stylelint stylelint-config-standard
次に、`lint-staged.config.js`ファイルを更新してStylelintを含めます：
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
コミット前のテスト実行
単体テストをpre-commitフックの一部として実行することもできます。これにより、コードがコミットされる前に正しく動作していることを確認できます。Jestを使用していると仮定します：
npm install --save-dev jest
`lint-staged.config.js`ファイルを更新してテストコマンドを含めます：
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
`--findRelatedTests`フラグは、変更されたファイルに関連するテストのみを実行するようにJestに指示し、プロセスを大幅に高速化します。
pre-commitフックのスキップ
場合によっては、一時的にpre-commitフックをスキップしたいことがあるかもしれません。これを行うには、`git commit`コマンドで`--no-verify`フラグを使用します：
git commit --no-verify -m "Commit message"
しかし、フックはコード品質を維持する上で重要な役割を果たすため、絶対に必要な場合を除き、フックのスキップは避けることが一般的に推奨されます。
一般的な問題のトラブルシューティング
- フックが実行されない： Huskyが正しくインストールおよび初期化され、プロジェクトのルートに`.husky`ディレクトリが存在することを確認してください。また、`.husky`ディレクトリ内の`pre-commit`ファイルが実行可能であることを確認してください。
- リンティングエラーが修正されない： ESLintで`--fix`フラグが使用されていること、およびESLint設定が特定のエラータイプを自動修正するように設定されていることを確認してください。
- Prettierがファイルをフォーマットしない： Prettierで`--write`フラグが使用されていること、およびPrettier設定が正しく設定されていることを確認してください。
- pre-commitフックが遅い： lint-stagedを使用してステージングされたファイルに対してのみリンターやフォーマッターを実行するようにしてください。また、チェックされるルールや設定の数を最小限に抑えるために、ESLintとPrettierの設定を最適化することを検討してください。
- 設定の競合： ESLintとPrettierの設定が互いに競合していないことを確認してください。競合している場合は、競合を解決するために一方または両方の設定を調整する必要があるかもしれません。競合を避けるために、`eslint-config-prettier`や`eslint-plugin-prettier`のような共有設定の使用を検討してください。
pre-commitフックのベストプラクティス
- フックを高速に保つ： 遅いフックは開発者の生産性に大きな影響を与える可能性があります。lint-stagedを使用してステージングされたファイルのみを処理し、リンターとフォーマッターの設定を最適化してください。
- 明確なエラーメッセージを提供する： フックが失敗した場合、開発者が問題を修正する方法を案内するための明確で有益なエラーメッセージを提供してください。
- できるだけ多くを自動化する： 手作業を最小限に抑え、一貫性を確保するために、コードフォーマットとリンティングを自動化してください。
- チームを教育する： すべてのチームメンバーがpre-commitフックの目的と効果的な使用方法を理解していることを確認してください。
- 一貫した設定を使用する： プロジェクト全体でESLint、Prettier、その他のツールの一貫した設定を維持してください。これにより、すべてのコードが同じ方法でフォーマットおよびリンティングされることが保証されます。複数のプロジェクトで簡単にインストールおよび更新できる共有設定パッケージの使用を検討してください。
- フックをテストする： pre-commitフックが正しく機能しており、予期しない問題を引き起こしていないことを確認するために、定期的にテストしてください。
グローバルな考慮事項
グローバルに分散したチームで作業する場合、次の点を考慮してください：
- 一貫したツールバージョン： すべてのチームメンバーが同じバージョンのESLint、Prettier、Husky、lint-stagedを使用していることを確認してください。これは、`package.json`ファイルでバージョンを指定し、npmやyarnのようなパッケージマネージャーを使用して依存関係をインストールすることで達成できます。
- クロスプラットフォーム互換性： 異なるオペレーティングシステム（Windows、macOS、Linux）でpre-commitフックをテストし、すべてのプラットフォームで正しく動作することを確認してください。可能な限りクロスプラットフォームのツールとコマンドを使用してください。
- タイムゾーンの違い： pre-commitフックの問題についてチームメンバーとコミュニケーションをとる際は、タイムゾーンの違いに注意してください。問題を迅速に解決できるように、明確な指示と例を提供してください。
- 言語サポート： プロジェクトが複数の言語を扱う場合、pre-commitフックがプロジェクトで使用されるすべての言語をサポートしていることを確認してください。言語ごとに追加のリンターやフォーマッターをインストールする必要があるかもしれません。
まとめ
pre-commitフックの実装は、JavaScriptプロジェクトにおいてコード品質を強制し、チームのコラボレーションを改善し、メンテナンスコストを削減するための効果的な方法です。ESLint、Prettier、Husky、lint-stagedのようなツールを統合することで、コードのフォーマット、リンティング、テストを自動化し、高品質なコードのみがリポジトリにコミットされることを保証できます。このガイドで概説された手順に従うことで、よりクリーンで、保守性が高く、信頼性の高いJavaScriptアプリケーションを構築するのに役立つ堅牢なコード品質ゲートを設定できます。このプラクティスを取り入れ、今日からチームの開発ワークフローを向上させましょう。